<template>
  <div>
    <!-- ---------------顶部横幅------------ -->
    <div class="topBanner">
      <router-link to="/home">
        <img
          src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
          alt=""
        />
      </router-link>
      <router-link to="/search">
        <van-search placeholder="搜索" shape="round" />
      </router-link>
      <div class="openApp">打开APP</div>
    </div>
    <div class="wrapper flex">
      <!-- 左侧选项卡 -->
      <div style="height: 736px; overflow: auto">
        <el-tabs
          @tab-click="selectCategory"
          tab-position="left"
          style="height: 100%"
          class="demo-tabs"
          color="red"
        >
          <el-tab-pane
            :label="categoryName.title"
            v-for="categoryName in categoryList"
          ></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 右侧分类卡 -->
      <div style="height: 736px; overflow: auto">
        <div class="flexC">
          <el-card
            class="box-card"
            v-for="(category, index) in categoryList"
            :class="{ card_active: index === activeIndex }"
          >
            <template #header>
              <div class="card-header">
                <span @click="toCategoryDetail(category.id, category.subCategories[0])">{{
                  category.title
                }}</span>
              </div>
            </template>
            <div
              v-for="subCategory in category.subCategories"
              :key="subCategory.id"
              class="text item listItem"
            >
              <span
                class="valueName"
                v-for="(value, index) in subCategory.metadataValues"
                @click="toCategoryDetail(category.id, subCategory, value, index)"
                >{{ value.name }}</span
              >
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import { reqCategoryList } from "../../api/tzl_category";
import router from "@/router";

export default defineComponent({
  name: "category",
});
</script>

<script setup lang="ts">
const categoryList = ref<any>([]); // 分类列表
const activeIndex = ref<any>(0); // 当前激活的索引

onMounted(() => {
  getCategoryList();
});

// 封装获取分类列表的函数
const getCategoryList = async () => {
  const res = await reqCategoryList();
  console.log(res);
  categoryList.value = res.data;
};

// 点击跳转分类详情页的函数
const toCategoryDetail = (categoryId: any, subCategory: any, value?: any, index: any) => {
  let categoryString;
  if (value) {
    categoryString = subCategory.name.slice(0, -2) + "," + value.name;
  } else {
    categoryString = subCategory.name.slice(0, -2);
  }

  let jilei = "";
  console.log(categoryString);
  if (categoryString.includes(",")) {
    jilei = categoryString.match(/[^,]*/)[0].trim();
  } else {
    jilei = categoryString;
  }

  // 跳转页面
  router.push({
    path: `/category/detail/${categoryId}`,
    query: {
      categoryString,
      index,
      jilei,
    },
  });
};
// 点击左侧分类列表的事件处理函数
const selectCategory = (tab: any) => {
  console.log(tab);
  activeIndex.value = Number(tab.index);
  // console.log(typeof activeIndex.value);
  setTimeout(() => {
    document.querySelector(".card_active")!.scrollIntoView({ block: "start" });
  });
};
</script>

<style scoped lang="less">
.topBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
  padding-top: 15px;

  height: 50px;
  width: 100%;
  img {
    width: 70px;
    height: 19px;
  }
  .openApp {
    height: 29px;
    width: 88px;
    line-height: 29px;
    text-align: center;
    font-size: 12px;
    // background-color: #fa2800;
    border: 1px solid #fa2800;
    color: #fa2800;
    border-radius: 15px;
  }
}

.flex {
  display: flex;
}
.flexC {
  display: flex;
  flex-direction: column;
}
.wrapper {
  justify-content: space-between;
}
/* tab选项卡的样式 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/* 正在激活的左侧分类栏 */
.el-tabs__item .is-left {
  color: red;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.el-tabs--left :deep(.is-left) {
  justify-content: center;
}
/* 卡片的样式 */
.el-card {
  border: none;
  box-shadow: none;
}
.el-card__header {
  height: 50px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  height: 50px;
}

/* 正在激活的选项卡 */
.card_active :deep(.el-card__header) {
  color: #fe7e60;
}
:deep(.el-card__header span) {
  font-size: 14px;
}
:deep(.el-card__body) {
  color: #7e8c8d;
  font-size: 14px;
}

.text {
  font-size: 14px;
}

.item {
  display: inline-block;
  margin-bottom: 18px;
}

.item .valueName {
  display: inline-block;
  margin-right: 18px;
}

.box-card {
  width: 260px;
}
/* 修改选项卡的高亮颜色为红色 */
:deep(.el-tabs__item) {
  color: #72727b;
}
:deep(.el-tabs__active-bar) {
  background-color: #f86442;
  width: 5px;
}
</style>
